<template>
    <div id="container">
        <nav v-if="showNav" class="menu-box">
            <Menu class="menu" mode="inline" theme="dark">
                <SubMenu popupClassName="sub-menu" key="sub2">
                    <template v-slot:title>
                        <span>基础管理</span>
                    </template>
                    <MenuItem key="5">
                        <router-link to="/userManagement">
                            用户权限
                        </router-link>
                    </MenuItem>
                </SubMenu>
                <MenuItem key="9">
                    <router-link to="/accessControlVideo">
                        门禁视频
                    </router-link>
                </MenuItem>
                <MenuItem key="10">
                    <router-link to="/nearlySevenDays">近7日访客</router-link>
                </MenuItem>
                <MenuItem key="11">
                    <router-link to="/visitRecord">来访记录</router-link>
                </MenuItem>
            </Menu>
        </nav>

        <main>
            <header>
                <img
                    class="logo"
                    src="/src/assets/logo.png"
                    alt="图片加载失败"
                />
                <h1 class="color-fff">访客系统</h1>
            </header>
            <router-view />
        </main>
    </div>
</template>

<script>
    import { Menu } from "ant-design-vue";
    import { watch } from "vue";
    import "ant-design-vue/dist/antd.css";
    export default {
        components: {
            Menu,
            MenuItem: Menu.Item,
            SubMenu: Menu.SubMenu,
            MenuItemGroup: Menu.ItemGroup,
        },
        setup() {
            return {
                showNav: document.body.clientWidth > 350,
            };
        },
    };
</script>

<style lang="scss">
    #app {
        width: 100%;
        height: 100%;
    }

    body {
        background-color: #005e5d;
    }
    .ant-btn {
        background-color: rgb(194, 247, 246);
        color: #005e5d;
    }

    .ant-input,
    .ant-table,
    .ant-table-header,
    .ant-table tr th {
        color: #005e5d;
    }
    .color-fff {
        color: #fff;
    }
</style>

<style lang="scss" scoped>
    #container {
        display: flex;
        height: 100%;
        .menu-box {
            height: 100%;
            width: 10%;
            overflow: hidden;
            background-color: #07504f;
            .menu {
                background-color: #07504f;
            }
        }
        main {
            flex: 1;
        }
    }
    header {
        display: flex;
        height: 100px;
        align-items: center;
        padding: 0 30px;
        h1 {
            text-align: center;
            flex: 1;
            font-weight: 600;
        }
        .logo {
            width: 100px;
            height: 100px;
            object-fit: contain;
        }
    }
</style>
